<script setup>
import { ref, shallowRef } from 'vue'
import PersonRegister from '@/views/register/Person.vue'
import EnterpriseRegister from '@/views/register/Enterprise.vue'
import { useAppStore, useCoreStore, insStoreRefsArray } from '@/stores'
const [[appStore], [coreStore]] = insStoreRefsArray([useAppStore, useCoreStore])
const personRegister = shallowRef(PersonRegister)
const enterpriseRegister = shallowRef(EnterpriseRegister)

const register_types = [
  // { type: 'person', label: '个人注册', as: personRegister },
  { type: 'enterprise', label: '企业注册', as: enterpriseRegister }
]
const current = ref(register_types[0])
function setType(item) {
  current.value = item
}
</script>
<template>
  <div class="w-full container mx-auto p-5 bg-white my-8 justify-content-center align-item-center">
    <section class="flex justify-content-center gap-5 my-5">
      <Button
        v-for="(item, index) in register_types"
        class="w-16rem h-4rem text-2xl"
        :outlined="current.label != item.label"
        :label="item.label"
        :key="index"
        @click="setType(item)"
      />
    </section>
    <div class="container mx-auto flex justify-content-center align-content-center">
      <component :is="current.as" />
    </div>
  </div>
</template>
